<template>
  <a-layout class="layout">
    <a-layout-content>
      <div class="content-container">
        <a-typography-title :level="1" class="text-center main-title">
          战神校园二手交易平台
        </a-typography-title>
        <a-typography-paragraph class="text-center subtitle">
          你可以在这上面自由交易
        </a-typography-paragraph>

        <a-alert
            v-if="announcement"
            :message="announcement.title"
            :description="announcement.content"
            type="info"
            show-icon
            class="announcement"
        />

        <a-typography-title :level="2" class="welcome-title">
          欢迎来到战神二手交易平台
        </a-typography-title>

        <a-typography-paragraph class="welcome-description">
          探索二手珍品的世界，赋予物品第二次生命。
          战神平台连接致力于可持续消费的买家和卖家。
        </a-typography-paragraph>

        <a-row :gutter="[32, 32]" class="feature-row">
          <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="feature in features" :key="feature.title">
            <a-card class="feature-card" :bodyStyle="{ padding: '24px' }">
              <template #cover>
                <div class="feature-icon-wrapper">
                  <component :is="feature.icon" class="feature-icon" />
                </div>
              </template>
              <a-card-meta :title="feature.title">
                <template #description>
                  <a-typography-paragraph>
                    {{ feature.description }}
                  </a-typography-paragraph>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>

        <a-row justify="center" class="cta-row">
          <a-col>
            <router-link to="/TradingPlatform">
              <a-button type="primary" size="large" shape="round" class="cta-button">
                Go Shopping!
              </a-button>
            </router-link>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ShoppingOutlined, DollarOutlined, TeamOutlined, SafetyOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const features = ref([
  {
    icon: ShoppingOutlined,
    title: '购买独特商品',
    description: '以优惠价格找到独一无二的商品'
  },
  {
    icon: DollarOutlined,
    title: '轻松出售',
    description: '快速发布物品并接触到有兴趣的买家'
  },
  {
    icon: TeamOutlined,
    title: '社区驱动',
    description: '加入一个注重环保的二手交易网络'
  },
  {
    icon: SafetyOutlined,
    title: '安全交易',
    description: '通过我们的安全平台放心购物'
  }
]);

const announcement = ref({
  title: '平台公告',
  content: '欢迎来到战神二手校园交易平台！我们正在进行春季大促活动，所有商品享受9折优惠。活动时间：2024年3月1日至3月15日。'
});


</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px;
}

.main-title {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 16px;
}

.text-center {
  text-align: center;
}

.subtitle {
  font-size: 24px;
  margin-bottom: 48px;
  color: #555;
}

.announcement {
  margin-bottom: 48px;
  font-size: 16px;
}

.welcome-title {
  font-size: 36px;
  margin-bottom: 24px;
  color: #333;
}

.welcome-description {
  font-size: 18px;
  margin-bottom: 48px;
  color: #666;
  line-height: 1.6;
}

.feature-row {
  margin-bottom: 48px;
}

.feature-card {
  height: 100%;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feature-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f9f9f9;
}

.feature-icon {
  font-size: 48px;
  color: #1890ff;
}

.cta-row {
  margin-top: 48px;
}

.cta-button {
  font-size: 20px;
  height: auto;
  padding: 12px 40px;
}
</style>

